<script setup>
import { reactive, ref } from 'vue'

//默认选中的菜单索引
//const selectedIndex = ref("2-2")
const selectedIndex = ref("3")

//选中菜单触发的回调
const selected = (index, indexPath) => {
    console.log("index", index, "indexPath", indexPath)
}

//默认展开的菜单索引
const defaultOpeneds = ref(["1","3"])

//用户执行的命令
const userCommand = (command) => { //点击菜单触发的回调
    console.log("command:", command)
}
</script>

<template>

<h3>水平导航</h3>
<el-menu mode="horizontal" :default-active="selectedIndex" @select="selected">
    <el-menu-item index="1">zhj编程</el-menu-item>
    <el-sub-menu index="2">
        <template #title>我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="3">消息中心</el-menu-item>
    <el-menu-item index="4">订单管理</el-menu-item>
</el-menu>


<h3>水平导航-自定义样式</h3>
<el-menu mode="horizontal" :default-active="selectedIndex" @select="selected" background-color="#545c64"
    text-color="#fff" active-text-color="#ffd04b" style="height: 40px; width: 600px;">
    <el-menu-item index="1">zhj编程</el-menu-item>
    <el-sub-menu index="2">
        <template #title>我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="3">消息中心</el-menu-item>
    <el-menu-item index="4">订单管理</el-menu-item>
</el-menu>

<h3>垂直导航</h3><br>
<el-menu :default-active="selectedIndex" @select="selected" style="width: 200px;">
    <el-sub-menu index="1">
        <template #title>
            <el-icon><Search /></el-icon>
            <span>导航一</span>
        </template>
        <el-menu-item-group>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
    </el-sub-menu>
    <el-menu-item index="2">
        <el-icon><Edit /></el-icon>
        <template #title>导航二</template>
    </el-menu-item>
    <el-menu-item index="3">
        <el-icon><Delete /></el-icon>
        <template #title>导航三</template>
    </el-menu-item>
    <el-menu-item index="4">
        <el-icon><Setting /></el-icon>
        <template #title>导航四</template>
    </el-menu-item>
</el-menu>

<h3>垂直导航-默认展开和自定义样式</h3>
<el-menu :default-active="selectedIndex" @select="selected" :default-openeds="defaultOpeneds"
    background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" style="width: 200px;">
    <el-sub-menu index="1">
        <template #title>
            <el-icon><Search /></el-icon>
            <span>导航一</span>
        </template>
        <el-menu-item-group>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
    </el-sub-menu>
    <el-menu-item index="2">
        <el-icon><Edit /></el-icon>
        <template #title>导航二</template>
    </el-menu-item>
    <el-sub-menu index="3">
        <template #title>
            <el-icon><Search /></el-icon>
            <span>导航三</span>
        </template>
        <el-menu-item-group>
            <el-menu-item index="3-1">选项1</el-menu-item>
            <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
    </el-sub-menu>
    <el-menu-item index="4">
        <el-icon><Setting /></el-icon>
        <template #title>导航四</template>
    </el-menu-item>
</el-menu>

<h3>面包屑</h3>
<el-breadcrumb separator="/">
    <el-breadcrumb-item><a href="#">首页</a></el-breadcrumb-item>
    <el-breadcrumb-item>zhj编程</el-breadcrumb-item>
    <el-breadcrumb-item>zhj.com</el-breadcrumb-item>
</el-breadcrumb>

<h3>下拉菜单</h3><br>
<el-dropdown @command="userCommand">
    <span>
        个人中心<el-icon><User /></el-icon>
    </span>
    <template #dropdown>
        <el-dropdown-menu>
            <el-dropdown-item command="order">订单</el-dropdown-item>
            <el-dropdown-item command="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
    </template>
</el-dropdown>

</template>

<style scoped>

</style>
